import React from 'react';
import {ScrollView, Button, View, Text, VirtualizedList, SectionList, FlatList} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function Home({navigation}) { // ScrollView组件滚动测试
    const [title, setTitle] = React.useState('我是Home的title');
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    return (
        <ScrollView
            style={{backgroundColor: 'yellow'}}
            contentInsetAdjustmentBehavior="automatic">
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>{title}</Text>
                <Text>Home Screen</Text>
            </View>
            <Button title="Changetext" onPress={() => setTitle('新的Home的title')} />
            {
                arr.map((item, index) => (
                    <Text key={index}>Home Screen {item}</Text>
                ))
            }
            <Button title="To Detail" onPress={() => navigation.navigate('Detail')} />
        </ScrollView>
    );
}

function ListHome({navigation}) { // VirtualizedList组件滚动测试
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    const getItemCount = (data) => data.length;
    const getItem = (data, index) => data[index];
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>List Home Screen</Text>
            <Button title="To Detail" onPress={() => navigation.navigate('Detail')} />
             <VirtualizedList
                data={arr}
                initialNumToRender={10}
                renderItem={({item}) => <Text>List Home {item}</Text>}
                keyExtractor={item => item.toString()}
                getItemCount={getItemCount}
                getItem={getItem}
            />
        </View>
    );
}

function SectionHome({navigation}) { // SectionList组件滚动测试
    const sections = [];
    for (let i = 0; i < 60; ++i) sections.push({title: `Section ${i}`, data: [`Item ${i}-1`, `Item ${i}-2`, `Item ${i}-3`]});
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Section Home Screen</Text>
            <Button title="To Detail" onPress={() => navigation.navigate('Detail')} />
            <SectionList
                sections={sections}
                keyExtractor={(item, index) => item + index}
                renderItem={({item}) => <Text>{item}</Text>}
                renderSectionHeader={({section: {title}}) => (
                    <Text style={{fontWeight: 'bold'}}>{title}</Text>
                )}
            />
        </View>
    );
}

function FlatHome({navigation}) { // FlatList组件滚动测试
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Flat Home Screen</Text>
            <Button title="To Detail" onPress={() => navigation.navigate('Detail')} />
            <FlatList
                data={arr}
                renderItem={({item}) => <Text>Flat Home {item}</Text>}
                keyExtractor={item => item.toString()}
            />
        </View>
    );
}

function Detail({navigation}) {
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    return (
        <ScrollView
            style={{backgroundColor: 'green'}}
            contentInsetAdjustmentBehavior="automatic">
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>我是Details Screen</Text>
               
            </View>
            {
                arr.map((item, index) => (
                    <Text key={index}>Detail Screen {item}</Text>
                ))
            }
            <Button title="To Home" onPress={() => navigation.goBack()} />
            <Button title="To Three" onPress={() => navigation.navigate('Three')} />
        </ScrollView>
    );
}

function Three({navigation}) {
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    return (
        <ScrollView
            style={{backgroundColor: 'red'}}
            contentInsetAdjustmentBehavior="automatic">
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>我是Three Screen</Text>
                
            </View>
            {
                arr.map((item, index) => (
                    <Text key={index}>Three Screen {item}</Text>
                ))
            }
            <Button title="To Detail" onPress={() => navigation.goBack()} />
            <Button title="To Home" onPress={() => navigation.navigate('Home')} />
            <Button title="To Four" onPress={() => navigation.navigate('Four')} />
        </ScrollView>
    );
}

function Four({navigation}) {
    const arr = [];
    for (let i = 0; i < 60; ++i) arr.push(i);
    return (
        <ScrollView
            style={{backgroundColor: 'red'}}
            contentInsetAdjustmentBehavior="automatic">
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Four Screen</Text>
                
            </View>
            {
                arr.map((item, index) => (
                    <Text key={index}>Four Screen {item}</Text>
                ))
            }
            <Button title="To Detail" onPress={() => navigation.navigate('Detail')} />
            <Button title="To Home" onPress={() => navigation.navigate('Home')} />
            <Button title="To Three" onPress={() => navigation.goBack()} />
        </ScrollView>
    );
}

const Stack = createStackNavigator();

function NativeNavigation() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    detachPreviousScreen: false, // 确保前一个屏幕不被卸载
                }}
                detachInactiveScreens={false}
            >
                <Stack.Screen
                    name="Home"
                    component={FlatHome}
                    options={{title: '我是Home的title'}}
                />
                <Stack.Screen
                    name="Detail"
                    component={Detail}
                    options={{title: '我是Detail的title'}}
                />
                <Stack.Screen
                    name="Three"
                    component={Three}
                    options={{title: '我是Three的title'}}
                />
                <Stack.Screen
                    name="Four"
                    component={Four}
                    options={{title: '我是Four的title'}}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export function ScreenDemo() {
    return <NativeNavigation />;
}
